<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>申请POS-${pos.name}</title>
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="${ctxStatic}/bootstrap/bootstrap.css" />
		<link rel="stylesheet" type="text/css" href="${ctxStatic}/custom/css/mystyle.css" />
		<%-- <link rel="stylesheet" href="${ctxStatic}/distpicker/css/main.css"> --%>
		<script type="text/javascript" src="${ctxStatic}/jquery/jquery-1.9.1.min.js"></script>
		<script src="${ctxStatic}/distpicker/js/distpicker.data.js"></script>
		<script src="${ctxStatic}/distpicker/js/distpicker.js"></script>
		<script src="${ctxStatic}/custom/js/validate.js"></script>
		<script type="text/javascript">
			$(document).ready(function() {
            
				$("#name").focus();
				
				// 省、市、区级联
				$("#province").change(function(){
					var provinceCode = $(this).children('option:selected').attr("data-code");
					var provinceName = $(this).children('option:selected').val();
					$("#provinceCode").val(provinceCode);
					$("#provinceName").val(provinceName);
					
					var cityCode = $("#city").find('option:selected').attr("data-code");
					var cityName = $("#city").find('option:selected').val();
					$("#cityCode").val(cityCode);
					$("#cityName").val(cityName);
					
					var districtCode = $("#district").find('option:selected').attr("data-code");
					var districtName = $("#district").find('option:selected').val();
					$("#districtCode").val(districtCode);
					$("#districtName").val(districtName);
				});
				// 市、区级联
				$("#city").change(function(){
					var cityCode = $(this).children('option:selected').attr("data-code");
					var cityName = $(this).children('option:selected').val();
					$("#cityCode").val(cityCode);
					$("#cityName").val(cityName);
					
					var districtCode = $("#district").find('option:selected').attr("data-code");
					var districtName = $("#district").find('option:selected').val();
					$("#districtCode").val(districtCode);
					$("#districtName").val(districtName);
				});
				
				$("#district").change(function(){
					var districtCode = $(this).children('option:selected').attr("data-code");
					var districtName = $(this).children('option:selected').val();
					$("#districtCode").val(districtCode);
					$("#districtName").val(districtName);
				});
				
				
				$("#btnSubmit").click(function(){
					applySubmit();
				});
				
			});
		</script>
	</head>
	<body style="padding: 8px;">
		<div class="container-fluid sq_container">
			<form:form id="inputForm">
				<div class="form-group">
					<label for="name">姓名</label>
					<input type="text" class="form-control realName" id="name" name="name" placeholder="姓名"/>
					<input type="hidden" id="posId" name="posId" value="${pos.id}"/>
					<input type="hidden" id="uid" name="uid" value="${uid}"/>
				</div>
				<div class="form-group">
					<label for="phone">手机号</label>
					<input type="text" class="form-control mobile" id="phone" name="phone" placeholder="手机号"/>
				</div>
				<div data-toggle="distpicker" class="dq_box">
					<select id="province" data-province="---- 选择省 ----"></select>
  				    <select id="city" data-city="---- 选择市 ----"></select>
  				    <select id="district" data-district="---- 选择区 ----"></select>
					<input type="hidden" id="provinceCode" name="provinceCode" value=""/>
  				 	<input type="hidden" id="provinceName" name="provinceName" value=""/>
  				    <input type="hidden" id="cityCode" name="cityCode" value=""/>
  				    <input type="hidden" id="cityName" name="cityName" value=""/>
  				    <input type="hidden" id="districtCode" name="districtCode" value=""/>
  				    <input type="hidden" id="districtName" name="districtName" value=""/>
				</div>
				<button type="button" id="btnSubmit" class="btn btn-success my_btn_success" data-toggle="modal" >提 交</button>
				<!--model-->
				<div style="display: none" id="modalDiv" class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
					<div class="modal-dialog modal-lg">
						<div class="modal-content">
							<div class="modal-header">
								您已提交成功
							</div>
							<div class="modal-footer">
								<a href="${ctxFront}/pay/pos/detail?id=${pos.id}&uid=${uid}" type="button" class="btn btn-success">确定</a>
							</div>
						</div>
					</div>
				</div>
				<!--model-->			
			</form:form>
		</div>

		<script type="text/javascript" src="${ctxStatic}/bootstrap/bootstrap.js"></script>
		<script type="text/javascript">
			$('.modal').modal({backdrop: 'static', keyboard: false});
			$('.modal').modal('hide');
		</script>
		<script type="text/javascript">
			
			function applySubmit(){
				
				var pid = $("#posId").val();
				var uid = $("#uid").val();
				var name = $("#name").val();
				var phone = $("#phone").val();
				var provinceCode = $("#provinceCode").val();
				var provinceName = $("#provinceName").val();
				var cityCode = $("#cityCode").val();
				var cityName = $("#cityName").val();
				var districtCode = $("#districtCode").val();
				var districtName = $("#districtName").val();
				
				var result = '';
				var errorNum = 0;
				if($.trim(name).length == 0){
					errorNum++;
					result += errorNum + '、姓名没有输入\n';
					$("#name").focus();
				} else {
					if(isChinaName($.trim(name)) == false){
						errorNum++;
						result += errorNum + '、姓名不合法\n';
						$("#name").focus();
					}
				}
				
				if($.trim(phone).length == 0){
					errorNum++;
					result += errorNum + '、手机号没有输入\n';
					$("#phone").focus();
				} else {
					if(isPhoneNo($.trim(phone)) == false){
						errorNum++;
						result += errorNum + '、手机号码不合法\n';
						$("#phone").focus();
					}
				}
				
				if(result != ''){
					
					alert(result);
					return false;
				} else {
					
					$.ajax({  
	                    type : "POST",  //提交方式  
	                    url : "${ctxFront}/pay/pos/applySubmit",//路径  
	                    data : {  
	                        "posId" : pid,
	                        "userId": uid,
	                        "name": name,
	                        "phone": phone,
	                        "provinceCode": provinceCode,
	                        "provinceName": provinceName,
	                        "cityCode": cityCode,
	                        "cityName": cityName,
	                        "districtCode": districtCode,
	                        "districtName": districtName
	                    },//数据，这里使用的是Json格式进行传输  
	                    success : function(result) {//返回数据根据结果进行相应的处理 
	                    	var data = eval("("+result+")");
	                        if (data.success) {  
	                        	$("#modalDiv").modal({show: true});
	                        } else {  
	                        	$("#modalDiv").modal('hide');
	                        }  
	                    }  
	                }); 
					
				}
			}
		</script>
	</body>
</html>